<template>
	<view class="nearPT">
		<view class="header dFlex jBetween_aCenter" :style="{
			'height':headerHeight+'px',
			'padding-top':headerTop+'px'
		}">
			<view class="backIcon imgPublic" @tap='back()'>
				<image src="../static/images/back.png" mode="widthFix"></image>
			</view>
			<view class='header_title'>洗匣士拼好团</view>
			<view class="backIcon"></view>
		</view>
		<view class="position dFlex jStart_aCenter">
			<view class="weizhi imgPublic">
				<image src='https://wx.gdxixiashi.com/public/images/home/weizhi.png' mode="widthFix"></image>
			</view>
			<text>{{address}}</text>
		</view>
		<view class="container" :style="{
			'height':contentHeight + 'px'
		}">
			<view class="tip dFlex jBetween_aCenter">
				<view class="bigTit"> 附近正在拼单 </view>
				<view class="smallTit"> 现在下单 立即拼成 </view>
			</view>
			<view class="list">
				<view class="ptOne dFlex jStart_aStart" v-for="(item,index) in list" :key='index' @click='shopDetail(item.productId)'>
						<view class="ptImg imgPublic">
							<image :src="item.list_img" mode="widthFix"></image>
						</view>
						<view class="ptInfo">
							<view class='shopName'>{{item.product_name}}</view>
							<view class="pt_info dFlex jStart_aCenter">
								<view class="cutTime dFlex jStart_aCenter">
									<uni-countdown color='#5c9ff8' splitorColor='#5c9ff8' :show-day="false" :hour="item.hour" :minute="item.min" :second="item.sec"></uni-countdown>
									<text>后结束</text>
								</view>
								<view class="users dFlex jEnd_aCenter">
									<!-- <view class='userList dFlex jStart_aCenter'>
										<view class="userOne" v-for="(user,index2) in 3" :key='index'>
											<image src="../static/logo.png" mode="widthFix"></image>
										</view>
									</view> -->
									<view class="userCount">还差<text>{{item.nums}}台</text>拼成</view>
								</view>
							</view>
							<view class="shopPrice dFlex jBetween_aCenter">
								<view class="price">￥<text>{{item.sell_price}}元/{{item.specs_name}}</text></view>
								<view class="btns dFlex jEnd_aCenter">
									<view class='btn' v-if='!item.isEnd' @tap.stop='lookDetail(item.productId,item.orderId)'>立即拼单</view>
									<view class='btn end' v-else >活动结束</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headerTop: '',
				headerHeight: '',
				contentHeight:"",
				productId:'',
				address:"",

				lat:"",
				lng:"",
				
				page:1,
				load:false,
				list:[],
			};
		},
		onLoad(e) {
			this.productId = e.productId ? e.productId : "";
			this.headerTop = uni.getMenuButtonBoundingClientRect().top;
			this.headerHeight = uni.getMenuButtonBoundingClientRect().height;
			uni.getLocation({
				type: 'gcj02', //设置type为gcj02
				isHighAccuracy: true,
				success: (locate) => {
					this.lat = locate.latitude;
					this.lng = locate.longitude;
					uni.request({
						url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=location',//腾讯官方逆解析接口，可直接复制
						data: {
							location: locate.latitude + ',' + locate.longitude,
							'key': getApp().globalData.mapKey,//自己申请的Key
						},
						method: "GET",
						success:(res)=>{
							res = res.data;
							if(res.status == 0){
								getApp().globalData.showAddress = res.result.formatted_addresses.standard_address;
								this.address = getApp().globalData.showAddress;
							}else{
								uni.showToast({
									title:'地理位置解析失败',
									icon:"none"
								})
							}
						},
						fail: res=> {
							console.log(res.errMsg,'解析失败返回的错误信息');
						}
					})
				},
				fail:(err)=>{
					console.log(err)
				},
				complete: () => {
					this.initList();
				}
			})
		},
		onReachBottom() {
			if(this.load){
				this.load = false;
				this.page ++;
				this.initList();
			}
		},
		onShow() {
			uni.createSelectorQuery().select('.position').boundingClientRect(data => {
				this.contentHeight = uni.getSystemInfoSync().windowHeight - this.headerTop - this.headerHeight - data.height;
			}).exec()
		},
		methods:{
			startCalcTime(stopTime){
				setInterval(()=>{
					return this.calcTime(stopTime - new Date().getTime());
				},1000)
			},
			initList(){
				this.tool.getData('Group/groupList',{
					memberId:uni.getStorageSync('userId')?uni.getStorageSync('userId'):'',
					page:this.page,
					lat:this.lat,
					lng:this.lng,
					productId:this.productId,
				}).then(res=>{
					if(res){
						res.list = res.list.map((item)=>{
							var chazhi = item.stop_time - new Date().getTime();
							return {
								...item,
								isEnd:item.stop_time && item.stop_time <= new Date().getTime() ? true : false,
								day : parseInt(chazhi / 1000 / 3600 / 24),
								hour : parseInt(chazhi / 1000 / 3600 % 24),
								min : parseInt(chazhi / 1000 / 60 % 60 ),
								sec : Math.round(chazhi / 1000 % 60),
							}
						})
						this.list = this.page == 1?res.list:this.list.concat(res.list);
						this.load = res.list.length>=10?true:false;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			// 拼团详情
			lookDetail(productId,orderId){
				uni.navigateTo({
					url:"./ptDetail?productId="+productId+'&orderId='+orderId,
				})
			},
			// 商品详情
			shopDetail(productId){
				uni.navigateTo({
					url:"/kind/shopDetail?productId="+productId,
				})
			},
		},
	}
</script>

<style lang="stylus">
	.nearPT {
		width: 100%;
		.position{
			width: 100%;
			padding: 10px 12px;
			box-sizing: border-box;
			color: white;
			font-size:12px;
			.weizhi{
				width:20px;
				height: 20px;
				margin-right: 10px;
			}
		}
		.container{
			.list{
				width:100%;
				.ptOne{
					.ptInfo{
						width:calc(100% - 80px);
						.btns{
							flex:1;
							.btn{
								width: auto;
								background:#5c9ff8;
								color: white;
								padding:3px 8px;
								border-radius: 5px;
								font-size:12px;
								margin-left: 5px;
							}
							.end{
								background:#F56C6C;
							}
						}
						.shopPrice{
							.price{
								color:#5c9ff8;
								font-size:12px;
								text{
									font-size:15px;
								}
							}
							width:100%;
						}
						.pt_info{
							width:100%;
							padding: 8px 0;
							font-size:12px;
							.users{
								flex:1;
								.userList{
									.userOne{
										width:20px;
										height: 20px;
										border-radius: 50%;
										border: 1px solid rgba(0,0,0,0.1);
									}
									width:max-content;
									margin-right: 5px;
								}
							}
							.cutTime{
								width:max-content;
								margin-right: 6px;
								/* text{
									color:#5c9ff8;
								} */
							}
						}
						.shopName{
							width:100%;
							word-break: break-all;
							overflow: hidden;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
					}
					.ptImg{
						width:100px;
						height:100px;
						overflow: hidden;
						margin-right:10px;
						image{
							border-radius: 4px;
						}
					}
					width:100%;
					background: white;
					// padding:0px 0px 10px;
					box-sizing: border-box;
					margin-bottom:12px;
				}
			}
			.tip{
				.bigTit{
					font-size: 14px;
					font-weight: bold;
					color:#333333;
				}
				width:100%;
				color:#999999;
				font-size: 12px;
				margin-bottom: 10px;
			}
			width:100%;
			padding:10px 12px;
			box-sizing: border-box;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			background: white;
		}
		.header{
			width:calc(100% - 24px);
			padding-left:12px;
			padding-right:12px;
			padding-bottom:5px;
			background:#5c9ff8;
			.backIcon{
				width:20px;
				height: 20px;
				padding:2px;
				box-sizing: border-box;
				border: 1px solid white;
				border-radius: 50%;
			}
			.header_title{
				font-size:16px;
				color: white;
				// background-image: linear-gradient(to bottom,#8abff1,#ffffff);
				// background-clip: text;
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
				font-weight: bold;
			}
		}
	}
	page{
		background:#5c9ff8;
	}
</style>